<template>
    <div class="dialog-container">
        <current-year id="currentYear" ref="currentYear"/>
    </div>
</template>

<script>
import CurrentYear from "../../components/portEconomy/BarLineChartMul";
import http from "../../commons/utils/httpUtil";
import echartsUtil from "../../commons/utils/echartsUtil";

export default {
    name: "ShenZhenPortRatio",
    props: {
        currentYearType: String,
    },
    components: {
        CurrentYear: CurrentYear,
    },

    mounted() {
        if (this.currentYearType === 'conta') {
            this.initCurrentYearContaOption();
        } else {
            this.initCurrentYearGoodsOption();
        }
    },

    methods: {
        /**
         * 初始化国内港口货物吞吐量排名
         */
        initCurrentYearContaOption() {
            let _this = this;

            http.get('/large/queryContaRatioWithAll').then((res) => {
                if (res && res.data && res.data.length > 0) {
                    let currentYearContaOption = {
                        titleText: '深圳各港区当年月集装箱吞吐量占比',
                        subText: '南山港占比峰值出现在6月',
                        legendData: ['深圳港', '南山港', '盐田港', '大铲湾', '南山港占比', '盐田港占比', '大铲湾占比'],
                        xAxisData: res.data.map(item => item.month + '月'),
                        yAxisName: ['吞吐量(万TEU)', '占比'],
                        seriesType: ['bar', 'bar', 'bar', 'bar', 'line', 'line', 'line'],
                        yAxisIndex: [0, 0, 0, 0, 1, 1, 1],
                        itemStyle: [
                            echartsUtil.getLinearGradient(0, 0, 0, 1, '#C8B238', '#FFE34D'),
                            echartsUtil.getLinearGradient(0, 0, 0, 1, '#DD555D', '#F25C66'),
                            echartsUtil.getLinearGradient(0, 0, 0, 1, '#198BFC', '#33EEFF'),
                            echartsUtil.getLinearGradient(0, 0, 0, 1, '#7DC852', '#DEFF4D'),
                            {normal: {color: '#f06162'}}
                        ],
                        seriesData: [
                            res.data.map(item => item.parentContaThr),
                            res.data.map(item => item.nsContaThr),
                            res.data.map(item => item.ytContaThr),
                            res.data.map(item => item.dcwContaThr),
                            res.data.map(item => item.nsRatio),
                            res.data.map(item => item.ytRatio),
                            res.data.map(item => item.dcwRatio),
                        ]
                    }
                    _this.$refs.currentYear.initSeries(currentYearContaOption);
                }
            });
        },

        /**
         * 初始化国内港口货物吞吐量排名
         */
        initCurrentYearGoodsOption() {
            let _this = this;

            http.get('/large/queryGoodsRatioWithAll').then((res) => {
                if (res && res.data && res.data.length > 0) {
                    let currentYearGoodsOption = {
                        titleText: '深圳各港区当年月货物吞吐量占比',
                        subText: '南山港占比峰值出现在6月',
                        legendData: ['深圳港', '南山港', '盐田港', '大铲湾', '南山港占比', '盐田港占比', '大铲湾占比'],
                        xAxisData: res.data.map(item => item.month + '月'),
                        yAxisName: ['吞吐量(万吨)', '占比'],
                        seriesType: ['bar', 'bar', 'bar', 'bar', 'line', 'line', 'line'],
                        yAxisIndex: [0, 0, 0, 0, 1, 1, 1],
                        itemStyle: [
                            echartsUtil.getLinearGradient(0, 0, 0, 1, '#C8B238', '#FFE34D'),
                            echartsUtil.getLinearGradient(0, 0, 0, 1, '#DD555D', '#F25C66'),
                            echartsUtil.getLinearGradient(0, 0, 0, 1, '#198BFC', '#33EEFF'),
                            echartsUtil.getLinearGradient(0, 0, 0, 1, '#7DC852', '#DEFF4D'),
                            {normal: {color: '#f06162'}}
                        ],
                        seriesData: [
                            res.data.map(item => item.parentGoodsThr),
                            res.data.map(item => item.nsGoodsThr),
                            res.data.map(item => item.ytGoodsThr),
                            res.data.map(item => item.dcwGoodsThr),
                            res.data.map(item => item.nsRatio),
                            res.data.map(item => item.ytRatio),
                            res.data.map(item => item.dcwRatio),
                        ]
                    }
                    _this.$refs.currentYear.initSeries(currentYearGoodsOption);
                }
            });
        },
    }
}
</script>

<style scoped>
.dialog-container {
    height: 708px;
}

.dialog-container > div {
    height: 100%;
}
</style>